<!-- 装备穿戴组件 -->
<template>
  <div>
    <div class="maintain" v-if="HomeContent.Default.ViewType.value == true">
      <div class="showWear" @click="showWear">
        <!-- 绝缘手套 -->
        <img
          src="/images/穿戴-wearDevice/pic_右手套.png"
          class="isWearSmallLeft"
          v-show="isWearOk"
        />
        <img
          src="/images/穿戴-wearDevice/pic_左手套.png"
          class="isWearSmallRight"
          v-if="isWearOk"
        />
        <!-- 安全帽 -->
        <img
          src="/images/穿戴-wearDevice/pic_安全帽1.png"
          class="isWearSmallHelmet"
          v-if="isWearHelmetOk"
        />
        <!-- 棉手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套2.png"
          class="isWearSmallGlove2Left"
          v-if="isWearGlove2Ok"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套2.png"
          class="isWearSmallGlove2Right"
          v-if="isWearGlove2Ok"
        />
        <!-- 靴子 -->
        <img
          src="/images/穿戴-wearDevice/pic_左鞋.png"
          class="isWearSmallShoeLeft"
          v-if="isWearShoeOk"
        />
        <img
          src="/images/穿戴-wearDevice/pic_右鞋.png"
          class="isWearSmallShoeRight"
          v-if="isWearShoeOk"
        />
        <!-- 护目镜 -->
        <img
          src="/images/穿戴-wearDevice/pic_护目镜1.png"
          class="isWearSmallGogglesOk"
          v-if="isWearGogglesOk"
        />
        <!-- 防酸碱手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套3.png"
          class="isWearGlove3SmallLeft"
          v-if="isWearGlove3Ok"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套3.png"
          class="isWearGlove3SmallRight"
          v-if="isWearGlove3Ok"
        />
      </div>
      <span class="text">维修人员</span>
    </div>
    <div class="Dia_wp" v-show="wearPop">
      <div class="wearPop">
        <h2 class="title">防护装备穿戴</h2>
        <!-- 绝缘手套 -->
        <img
          src="/images/穿戴-wearDevice/pic_右手套.png"
          class="isWearLeft"
          v-if="isWearOk"
        />
        <img
          src="/images/穿戴-wearDevice/pic_左手套.png"
          class="isWearRight"
          v-if="isWearOk"
        />
        <img
          ref="floatGlove1"
          src="/images/穿戴-wearDevice/pic_手套1.png"
          draggable="true"
          class="glove1"
          :style="{
            transform: `translate(${elementPosition1.x}px, ${elementPosition1.y}px)`,
          }"
        />
        <!-- 安全帽 -->
        <img
          src="/images/穿戴-wearDevice/pic_安全帽1.png"
          class="isWearHelmet"
          v-if="isWearHelmetOk"
        />
        <img
          ref="floatHelmet"
          src="/images/穿戴-wearDevice/pic_安全帽.png"
          v-drag.offset.clamp
          drag-trigger
          class="helmet"
          :style="{
            transform: `translate(${elementPosition2.x}px, ${elementPosition2.y}px)`,
          }"
        />
        <!-- 棉手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套2@2x.png"
          class="isWearGlove2Left"
          v-if="isWearGlove2Ok"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套2@2x.png"
          class="isWearGlove2Right"
          v-if="isWearGlove2Ok"
        />
        <img
          ref="floatGlove2"
          src="/images/穿戴-wearDevice/pic_手套2.png"
          v-drag.offset.clamp
          drag-trigger
          class="glove2"
          :style="{
            transform: `translate(${elementPosition3.x}px, ${elementPosition3.y}px)`,
          }"
        />
        <!-- 鞋子 -->
        <img
          src="/images/穿戴-wearDevice/pic_左鞋.png"
          class="isWearShoeLeft"
          v-if="isWearShoeOk"
        />
        <img
          src="/images/穿戴-wearDevice/pic_右鞋.png"
          class="isWearShoeRight"
          v-if="isWearShoeOk"
        />
        <img
          ref="floatShoe"
          src="/images/穿戴-wearDevice/pic_防护鞋.png"
          v-drag.offset.clamp
          drag-trigger
          class="shoe"
          :style="{
            transform: `translate(${elementPosition4.x}px, ${elementPosition4.y}px)`,
          }"
        />
        <!-- 护目镜 -->
        <img
          src="/images/穿戴-wearDevice/pic_护目镜1.png"
          class="isWearGogglesOk"
          v-if="isWearGogglesOk"
        />
        <img
          ref="floatGoggles"
          src="/images/穿戴-wearDevice/pic_护目镜.png"
          v-drag.offset.clamp
          drag-trigger
          class="goggles"
          :style="{
            transform: `translate(${elementPosition5.x}px, ${elementPosition5.y}px)`,
          }"
        />
        <!-- 防酸碱手套 -->
        <img
          src="/images/穿戴-wearDevice/Pic_左手套3@2x.png"
          class="isWearGlove3Left"
          v-if="isWearGlove3Ok"
        />
        <img
          src="/images/穿戴-wearDevice/Pic_右手套3@2x.png"
          class="isWearGlove3Right"
          v-if="isWearGlove3Ok"
        />
        <img
          ref="floatCorrosionGlove"
          src="/images/穿戴-wearDevice/pic_耐酸腐手套.png"
          v-drag.offset.clamp
          drag-trigger
          class="corrosionGlove"
          :style="{
            transform: `translate(${elementPosition6.x}px, ${elementPosition6.y}px)`,
          }"
        />
        <span class="close" @click="closeWearPop">×</span>
        <div class="circle1"></div>
        <span class="head">头部</span>
        <div class="circle2" ref="circle_hand"></div>
        <span class="hand">手部</span>
        <div class="circle3"></div>
        <span class="eyes">眼部</span>
        <div class="circle4"></div>
        <span class="foot">脚部</span>
        <div class="proplePic">
          <img
            src="/images/穿戴-wearDevice/pic_右手.png"
            style="position: absolute; top: 207px; left: 33px"
          />
          <img
            src="/images/穿戴-wearDevice/pic_左手.png"
            style="position: absolute; top: 207px; right: 32px"
          />
        </div>
        <span class="tip">请使用鼠标左键拖动需要穿戴的防护装备到对应的部位</span>
        <div class="toolbar">
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="isWearOk"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_手套2-2.png"
                style="position: absolute; bottom: 42px; left: 48px"
                v-if="isWearOk"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="isWearHelmetOk"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_安全帽2.png"
                style="position: absolute; bottom: 42px; left: 248px"
                v-if="isWearHelmetOk"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="isWearGlove2Ok"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_手套2-1.png"
                style="position: absolute; bottom: 42px; left: 448px"
                v-if="isWearGlove2Ok"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="isWearShoeOk"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_防护鞋2.png"
                style="position: absolute; bottom: 42px; left: 648px"
                v-if="isWearShoeOk"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2">
              <img
                src="/public/images/穿戴-wearDevice/pic_bg_selected.png"
                v-if="isWearGogglesOk"
              />
              <img
                src="/public/images/穿戴-wearDevice/pic_护目镜2.png"
                style="position: absolute; bottom: 42px; left: 846px"
                v-if="isWearGogglesOk"
              />
              <img src="/public/images/穿戴-wearDevice/pic_bg_normal.png" v-else />
            </div>
          </div>
          <div class="box1">
            <div class="box2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import HomeContent from "../HomeContent";
import MessageCode from "../MessageCode";
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";

const isWearOk = ref(false);
const isWearHelmetOk = ref(false);
const isWearShoeOk = ref(false);
const isWearGogglesOk = ref(false);
const isWearGlove2Ok = ref(false);
const isWearGlove3Ok = ref(false);

const wearPop = ref(false);
async function showWear() {
  wearPop.value = !wearPop.value;
  // let newArr: any = await WebSocketComponent.Default.PostMessageAsync(
  //   new ClientMessage.DiagnosisAdapterRequest(
  //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_GET_WEAR_INFO
  //   )
  // );
  // console.log("穿戴信息", JSON.parse(newArr.Content).Result);
  // HomeContent.Default.wearInfo.value = JSON.parse(newArr.Content).Result;
}

const originalPosition = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset = reactive({
  x: 0,
  y: 0,
});
const elementPosition = reactive({
  x: 10,
  y: 10,
});
const originalPosition1 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset1 = reactive({
  x: 0,
  y: 0,
});
const elementPosition1 = reactive({
  x: 10,
  y: 10,
});
const originalPosition2 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset2 = reactive({
  x: 0,
  y: 0,
});
const elementPosition2 = reactive({
  x: 10,
  y: 10,
});
const originalPosition3 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset3 = reactive({
  x: 0,
  y: 0,
});
const elementPosition3 = reactive({
  x: 10,
  y: 10,
});
const originalPosition4 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset4 = reactive({
  x: 0,
  y: 0,
});
const elementPosition4 = reactive({
  x: 10,
  y: 10,
});
const originalPosition5 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset5 = reactive({
  x: 0,
  y: 0,
});
const elementPosition5 = reactive({
  x: 10,
  y: 10,
});
const originalPosition6 = reactive({
  x: 10,
  y: 10,
});
const mousedownOffset6 = reactive({
  x: 0,
  y: 0,
});
const elementPosition6 = reactive({
  x: 10,
  y: 10,
});
const restore = () => {
  elementPosition.x = originalPosition.x;
  elementPosition.y = originalPosition.y;
};
// ======================================================================
const IsWear = ref({
  type: 0,
  id: 0,
});
const UnWear = ref({
  type: 0,
  id: 0,
});
const circle_hand = ref<any>(null);
const onMousedown1 = async (event: MouseEvent) => {
  // IsWear.value.id = HomeContent.Default.wearInfo.value[5].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  // IsWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  // UnWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
  event.stopPropagation();
  // 鼠标按下的时候的x/y
  mousedownOffset1.x = event.clientX - originalPosition1.x;
  mousedownOffset1.y = event.clientY - originalPosition1.y;
  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    elementPosition1.x = originalPosition1.x;
    elementPosition1.y = originalPosition1.y;
    isWearOk.value = false;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(UnWear.value)
    //   )
    // );
  } else {
    document.addEventListener("mousemove", onMousemove1, true);
    document.addEventListener("mouseup", onMouseup1, true);
  }
};
const onMousemove1 = async (event: MouseEvent) => {
  event.stopPropagation();
  // 图片所在的x/y
  elementPosition1.x = event.clientX - mousedownOffset1.x;
  elementPosition1.y = event.clientY - mousedownOffset1.y;
};
const onMouseup1 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove1, true);
  document.removeEventListener("mouseup", onMouseup1, true);
  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    if (isWearGlove2Ok.value) {
      elementPosition3.x = originalPosition3.x;
      elementPosition3.y = originalPosition3.y;
      isWearGlove2Ok.value = false;
      // UnWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(UnWear.value)
      //   )
      // );
      elementPosition1.x = 275;
      elementPosition1.y = -294;
      isWearOk.value = true;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    } else if (isWearGlove3Ok.value) {
      // 如果已经有防酸碱手套了，先让防酸碱手套回去远点
      elementPosition6.x = originalPosition6.x;
      elementPosition6.y = originalPosition6.y;
      isWearGlove3Ok.value = false;
      // UnWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
      // 发消息让防酸碱手套为false
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(UnWear.value)
      //   )
      // );
      // 让绝缘手套在圆圈内
      elementPosition1.x = 275;
      elementPosition1.y = -294;
      isWearOk.value = true;
      // 发消息让绝缘手套为true
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    } else {
      elementPosition1.x = 275;
      elementPosition1.y = -294;
      isWearOk.value = true;
      // 在圈里发信息，如果type对应，就发个消息
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    }
  } else {
    elementPosition1.x = originalPosition1.x;
    elementPosition1.y = originalPosition1.y;
    isWearOk.value = false;
  }
};
const onMousedown2 = async (event: MouseEvent) => {
  // IsWear.value.id = HomeContent.Default.wearInfo.value[1].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  // IsWear.value.type = HomeContent.Default.wearInfo.value[1].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  // UnWear.value.type = HomeContent.Default.wearInfo.value[1].Type;
  event.stopPropagation();

  mousedownOffset2.x = event.clientX - originalPosition2.x;
  mousedownOffset2.y = event.clientY - originalPosition2.y;

  if (
    event.clientX > 671 &&
    event.clientX < 775 &&
    event.clientY > 250 &&
    event.clientY < 357
  ) {
    elementPosition2.x = originalPosition2.x;
    elementPosition2.y = originalPosition2.y;
    isWearHelmetOk.value = false;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(UnWear.value)
    //   )
    // );
  } else {
    document.addEventListener("mousemove", onMousemove2, true);
    document.addEventListener("mouseup", onMouseup2, true);
  }
};
const onMousemove2 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition2.x = event.clientX - mousedownOffset2.x;
  elementPosition2.y = event.clientY - mousedownOffset2.y;
};
const onMouseup2 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove2, true);
  document.removeEventListener("mouseup", onMouseup2, true);
  // 如果鼠标松开的位置在圈内并且圈内是否包含图片元素
  if (
    event.clientX > 671 &&
    event.clientX < 775 &&
    event.clientY > 250 &&
    event.clientY < 357
  ) {
    elementPosition2.x = 76;
    elementPosition2.y = -531;
    isWearHelmetOk.value = true;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(IsWear.value)
    //   )
    // );
  } else {
    elementPosition2.x = originalPosition2.x;
    elementPosition2.y = originalPosition2.y;
    isWearHelmetOk.value = false;
  }
};
const onMousedown3 = async (event: MouseEvent) => {
  // IsWear.value.id = HomeContent.Default.wearInfo.value[0].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  // IsWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  // UnWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
  event.stopPropagation();

  mousedownOffset3.x = event.clientX - originalPosition3.x;
  mousedownOffset3.y = event.clientY - originalPosition3.y;

  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    elementPosition3.x = originalPosition3.x;
    elementPosition3.y = originalPosition3.y;
    isWearGlove2Ok.value = false;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(UnWear.value)
    //   )
    // );
  } else {
    document.addEventListener("mousemove", onMousemove3, true);
    document.addEventListener("mouseup", onMouseup3, true);
  }
};
const onMousemove3 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition3.x = event.clientX - mousedownOffset3.x;
  elementPosition3.y = event.clientY - mousedownOffset3.y;
};
const onMouseup3 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove3, true);
  document.removeEventListener("mouseup", onMouseup3, true);

  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    if (isWearOk.value) {
      elementPosition1.x = originalPosition1.x;
      elementPosition1.y = originalPosition1.y;
      isWearOk.value = false;
      // UnWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(UnWear.value)
      //   )
      // );
      elementPosition3.x = -124;
      elementPosition3.y = -294;
      isWearGlove2Ok.value = true;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    } else if (isWearGlove3Ok.value) {
      elementPosition6.x = originalPosition6.x;
      elementPosition6.y = originalPosition6.y;
      isWearGlove3Ok.value = false;
      // UnWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(UnWear.value)
      //   )
      // );
      elementPosition3.x = -124;
      elementPosition3.y = -294;
      isWearGlove2Ok.value = true;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    } else {
      elementPosition3.x = -124;
      elementPosition3.y = -294;
      isWearGlove2Ok.value = true;
      // 在圈里发信息，如果type对应，就发个消息
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    }
  } else {
    elementPosition3.x = originalPosition3.x;
    elementPosition3.y = originalPosition3.y;
    isWearGlove2Ok.value = false;
  }
};
const onMousedown4 = async (event: MouseEvent) => {
  // IsWear.value.id = HomeContent.Default.wearInfo.value[3].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  // IsWear.value.type = HomeContent.Default.wearInfo.value[3].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  // UnWear.value.type = HomeContent.Default.wearInfo.value[3].Type;
  event.stopPropagation();

  mousedownOffset4.x = event.clientX - originalPosition4.x;
  mousedownOffset4.y = event.clientY - originalPosition4.y;

  if (
    event.clientX > 1144 &&
    event.clientX < 1247 &&
    event.clientY > 487 &&
    event.clientY < 588
  ) {
    elementPosition4.x = originalPosition4.x;
    elementPosition4.y = originalPosition4.y;
    isWearShoeOk.value = false;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(UnWear.value)
    //   )
    // );
  } else {
    document.addEventListener("mousemove", onMousemove4, true);
    document.addEventListener("mouseup", onMouseup4, true);
  }
};
const onMousemove4 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition4.x = event.clientX - mousedownOffset4.x;
  elementPosition4.y = event.clientY - mousedownOffset4.y;
};
const onMouseup4 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove4, true);
  document.removeEventListener("mouseup", onMouseup4, true);
  if (
    event.clientX > 1144 &&
    event.clientX < 1247 &&
    event.clientY > 487 &&
    event.clientY < 588
  ) {
    elementPosition4.x = 145;
    elementPosition4.y = -295;
    isWearShoeOk.value = true;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(IsWear.value)
    //   )
    // );
  } else {
    elementPosition4.x = originalPosition4.x;
    elementPosition4.y = originalPosition4.y;
    isWearShoeOk.value = false;
  }
};
const onMousedown5 = async (event: MouseEvent) => {
  // IsWear.value.id = HomeContent.Default.wearInfo.value[4].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  // IsWear.value.type = HomeContent.Default.wearInfo.value[4].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  // UnWear.value.type = HomeContent.Default.wearInfo.value[4].Type;
  event.stopPropagation();

  mousedownOffset5.x = event.clientX - originalPosition5.x;
  mousedownOffset5.y = event.clientY - originalPosition5.y;

  if (
    event.clientX > 1143 &&
    event.clientX < 1246 &&
    event.clientY > 251 &&
    event.clientY < 351
  ) {
    elementPosition5.x = originalPosition5.x;
    elementPosition5.y = originalPosition5.y;
    isWearGogglesOk.value = false;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(UnWear.value)
    //   )
    // );
  } else {
    document.addEventListener("mousemove", onMousemove5, true);
    document.addEventListener("mouseup", onMouseup5, true);
  }
};
const onMousemove5 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition5.x = event.clientX - mousedownOffset5.x;
  elementPosition5.y = event.clientY - mousedownOffset5.y;
};
const onMouseup5 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove5, true);
  document.removeEventListener("mouseup", onMouseup5, true);
  if (
    event.clientX > 1143 &&
    event.clientX < 1246 &&
    event.clientY > 251 &&
    event.clientY < 351
  ) {
    elementPosition5.x = -55;
    elementPosition5.y = -531;
    isWearGogglesOk.value = true;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(IsWear.value)
    //   )
    // );
  } else {
    elementPosition5.x = originalPosition5.x;
    elementPosition5.y = originalPosition5.y;
    isWearGogglesOk.value = false;
  }
};
const onMousedown6 = async (event: MouseEvent) => {
  // IsWear.value.id = HomeContent.Default.wearInfo.value[2].Id;
  console.log("IsWear.value.id", IsWear.value.id);

  // IsWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
  console.log("IsWear.value.type", IsWear.value.type);
  // UnWear.value.type = HomeContent.Default.wearInfo.value[2].Type;
  event.stopPropagation();

  mousedownOffset6.x = event.clientX - originalPosition6.x;
  mousedownOffset6.y = event.clientY - originalPosition6.y;

  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    elementPosition6.x = originalPosition6.x;
    elementPosition6.y = originalPosition6.y;
    isWearGlove3Ok.value = false;
    // await WebSocketComponent.Default.PostMessage(
    //   new ClientMessage.DiagnosisAdapterMessage(
    //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
    //     JSON.stringify(UnWear.value)
    //   )
    // );
  } else {
    document.addEventListener("mousemove", onMousemove6, true);
    document.addEventListener("mouseup", onMouseup6, true);
  }
};
const onMousemove6 = (event: MouseEvent) => {
  event.stopPropagation();

  elementPosition6.x = event.clientX - mousedownOffset6.x;
  elementPosition6.y = event.clientY - mousedownOffset6.y;
};
const onMouseup6 = async (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener("mousemove", onMousemove6, true);
  document.removeEventListener("mouseup", onMouseup6, true);
  if (
    event.clientX > 673 &&
    event.clientX < 778 &&
    event.clientY > 489 &&
    event.clientY < 591
  ) {
    if (isWearOk.value) {
      elementPosition1.x = originalPosition1.x;
      elementPosition1.y = originalPosition1.y;
      isWearOk.value = false;
      // UnWear.value.type = HomeContent.Default.wearInfo.value[5].Type;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(UnWear.value)
      //   )
      // );
      elementPosition6.x = -724;
      elementPosition6.y = -294;
      isWearGlove3Ok.value = true;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    } else if (isWearGlove2Ok.value) {
      elementPosition3.x = originalPosition3.x;
      elementPosition3.y = originalPosition3.y;
      isWearGlove2Ok.value = false;
      // UnWear.value.type = HomeContent.Default.wearInfo.value[0].Type;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(UnWear.value)
      //   )
      // );
      elementPosition6.x = -724;
      elementPosition6.y = -294;
      isWearGlove3Ok.value = true;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    } else {
      elementPosition6.x = -724;
      elementPosition6.y = -294;
      isWearGlove3Ok.value = true;
      // await WebSocketComponent.Default.PostMessage(
      //   new ClientMessage.DiagnosisAdapterMessage(
      //     MessageCode.Default.MsgCodesList.DIAGNOSTIC_SET_WEAR_INFO,
      //     JSON.stringify(IsWear.value)
      //   )
      // );
    }
  } else {
    elementPosition6.x = originalPosition6.x;
    elementPosition6.y = originalPosition6.y;
    isWearGlove3Ok.value = false;
  }
};
//
// ========================================
const floatGlove1 = ref<any>(null);
const floatHelmet = ref<any>(null);
const floatGlove2 = ref<any>(null);
const floatShoe = ref<any>(null);
const floatGoggles = ref<any>(null);
const floatCorrosionGlove = ref<any>(null);

onMounted(() => {
  restore();
  floatGlove1.value.addEventListener("mousedown", onMousedown1, true);
  floatHelmet.value.addEventListener("mousedown", onMousedown2, true);
  floatGlove2.value.addEventListener("mousedown", onMousedown3, true);
  floatShoe.value.addEventListener("mousedown", onMousedown4, true);
  floatGoggles.value.addEventListener("mousedown", onMousedown5, true);
  floatCorrosionGlove.value.addEventListener("mousedown", onMousedown6, true);
});

onUnmounted(() => {
  floatGlove1.value.removeEventListener("mousedown", onMousedown1, true);
  floatHelmet.value.removeEventListener("mousedown", onMousedown2, true);
  floatGlove2.value.removeEventListener("mousedown", onMousedown3, true);
  floatShoe.value.removeEventListener("mousedown", onMousedown4, true);
  floatGoggles.value.removeEventListener("mousedown", onMousedown5, true);
  floatCorrosionGlove.value.removeEventListener("mousedown", onMousedown6, true);
});
function closeWearPop() {
  wearPop.value = false;
}
</script>

<style scoped>
.wp {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  color: #fff;
  background: transparent;
  overflow: hidden;
}

.maintain {
  width: 100px;
  height: 166px;
  position: absolute;
  left: 20px;
  bottom: 56px;
}

.showWear {
  left: 20px;
  width: 100px;
  height: 146px;
  background: rgba(34, 35, 39, 0.9);
  background-image: url("/images/穿戴-wearDevice/pic_人 默认状态.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65% 88%;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 0px solid;
  border-image: linear-gradient(180deg, rgba(206, 240, 114, 0.5), rgba(206, 240, 114, 0))
    0 0;
}

.text {
  font-size: 10px;
  margin-left: 29px;
}

.Dia_wp {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.1);
  position: relative;
}

.wearPop {
  width: 1440px;
  height: 884px;
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid;
  opacity: 1;
  position: absolute;
  margin-top: 45px;
  margin-left: 240px;
}

.title {
  position: absolute;
  top: 27px;
  left: 40px;
  font-size: 30px;
}

.close {
  font-size: 45px;
  position: absolute;
  color: #000;
  right: 40px;
}

h2 {
  font-weight: 550;
}

.circle1 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  left: 432px;
  top: 150px;
}

.circle2 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  left: 432px;
  top: 387px;
}

.circle3 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  right: 432px;
  top: 150px;
}

.circle4 {
  width: 104px;
  height: 104px;
  border-radius: 50px;
  opacity: 1;
  border: 1px solid #e9e9e9;
  position: absolute;
  right: 432px;
  top: 387px;
}

.head {
  color: #000;
  position: absolute;
  top: 265px;
  left: 472px;
}

.hand {
  color: #000;
  position: absolute;
  top: 500px;
  left: 472px;
}

.eyes {
  color: #000;
  position: absolute;
  top: 265px;
  right: 472px;
}

.foot {
  color: #000;
  position: absolute;
  top: 500px;
  right: 472px;
}

.proplePic {
  width: 230px;
  height: 480px;
  margin: 24px 56px 8px 56px;
  background-image: url("/images/穿戴-wearDevice/pic_人 默认状态.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 102px;
  left: 560px;
}

.toolbar {
  height: 200px;
  border-radius: 24px 24px 24px 24px;
  opacity: 1;
  border: 1px solid #f0f0f0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 40px;
  display: flex;
}

.tip {
  position: absolute;
  top: 606px;
  left: 559px;
  font-size: 12px;
  color: #000;
  margin: 10px 0 0 29px;
}

.box1 {
  width: 152px;
  height: 152px;
  margin: 24px;
}

.box2 {
  width: 104px;
  height: 104px;
  background: #f8f8f8;
  opacity: 1;
  margin: 24px;
  border-radius: 50%;
}
.glove1 {
  position: absolute;
  left: 157px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.isWearLeft {
  position: absolute;
  top: 311px;
  left: 632px;
  z-index: 1;
}

.isWearSmallLeft {
  position: absolute;
  left: 22px;
  top: 58px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearRight {
  position: absolute;
  top: 311px;
  left: 778px;
  z-index: 1;
}

.isWearSmallRight {
  position: absolute;
  left: 65px;
  top: 57px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearGlove2Left {
  position: absolute;
  z-index: 1;
  top: 324px;
  left: 774px;
  object-fit: contain;
  width: 50px;
}

.isWearSmallGlove2Left {
  position: absolute;
  left: 63px;
  top: 59px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearGlove2Right {
  position: absolute;
  z-index: 1;
  top: 324px;
  left: 640px;
  object-fit: contain;
  width: 50px;
}

.isWearSmallGlove2Right {
  position: absolute;
  left: 24px;
  top: 60px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.isWearGlove3Left {
  position: absolute;
  z-index: 1;
  top: 309px;
  left: 770px;
  object-fit: contain;
  width: 82px;
}

.isWearGlove3SmallLeft {
  position: absolute;
  left: 62px;
  top: 59px;
  z-index: 1;
  object-fit: contain;
  width: 20px;
}

.isWearGlove3Right {
  position: absolute;
  z-index: 1;
  top: 309px;
  left: 612px;
  object-fit: contain;
  width: 82px;
}

.isWearGlove3SmallRight {
  position: absolute;
  left: 20px;
  top: 60px;
  z-index: 1;
  object-fit: contain;
  width: 20px;
}

.isWearHelmet {
  position: absolute;
  top: 137px;
  left: 700px;
  z-index: 2;
}

.isWearSmallHelmet {
  position: absolute;
  left: 41.4px;
  top: 10.16px;
  z-index: 2;
  object-fit: contain;
  width: 20px;
}

.isWearShoeLeft {
  position: absolute;
  top: 532px;
  left: 734px;
  z-index: 1;
}

.isWearSmallShoeLeft {
  position: absolute;
  left: 51px;
  bottom: 32px;
  z-index: 1;
  object-fit: contain;
  width: 18px;
}

.isWearShoeRight {
  position: absolute;
  top: 532px;
  left: 669px;
  z-index: 1;
}

.isWearSmallShoeRight {
  position: absolute;
  left: 33px;
  bottom: 32px;
  z-index: 1;
  object-fit: contain;
  width: 18px;
}

.isWearGogglesOk {
  position: absolute;
  top: 176px;
  left: 709px;
  z-index: 1;
}

.isWearSmallGogglesOk {
  position: absolute;
  left: 44px;
  top: 22px;
  z-index: 1;
  object-fit: contain;
  width: 15px;
}

.helmet {
  position: absolute;
  left: 357px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.glove2 {
  position: absolute;
  left: 557px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.shoe {
  position: absolute;
  left: 757px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.goggles {
  position: absolute;
  left: 957px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.corrosionGlove {
  position: absolute;
  left: 1157px;
  top: 681px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
</style>
